import { Space, Button, message, Form, Image, Typography, Row, Col } from 'antd';
import ProCard from '@ant-design/pro-card';
import React, { useState, useRef, useEffect } from 'react';
import { getDvaApp, history, } from 'umi';
import ProForm, {
    ProFormText,
    ProFormTextArea,
} from '@ant-design/pro-form';
import type { ProFormInstance } from '@ant-design/pro-form';
import { PageContainer } from '@ant-design/pro-layout';
import $utils from '@/utils/utils';
import { getFeedBackDetail, feedBackReply } from '@/services/feedback';

const { Title } = Typography;

const userInfo = $utils.getStorage('user_info');

const Detail: React.FC = () => {

    // 解决无法调用dispatch
    const dispatch = getDvaApp()._store.dispatch;
    const formRef = useRef<ProFormInstance>();
    const [cur_id, setCur_id] = useState<string>();
    const [feedBackDetail, setFeedBackDetail] = useState<any>();

    const l_state: any = history.location.state;
    if (!cur_id && !l_state) {
        history.push('/OperationsMange/Feedback');
    }

    const id: string = l_state?.data?.id || '';
    //  同path更新,只更新state时，通过id重新请求数据
    if ((l_state && id) && (!cur_id || cur_id !== id)) {
        setCur_id(id);
    } else if (l_state && !id && cur_id !== id) {
        setCur_id('');
    }

    const isDetail: boolean = l_state?.status === 'detail';
    const isReply: boolean = l_state?.status === 'reply';

    useEffect(() => {

        const getFeedBackData = async () => {
            // 获取当前 管理员用户名
            const selfName = userInfo.name;
            try {
                const msg = await getFeedBackDetail({ id: cur_id });;
                if (msg.code === 0) {
                    let data = {};
                    data = Object.assign({}, msg.body, data, { selfName });
                    setFeedBackDetail(data);
                    formRef && formRef.current?.resetFields();
                    return;
                }
            } catch (error) {
                console.log(error);
            }
        };

        getFeedBackData();
    }, [cur_id]);

    return (
        <PageContainer>
            {feedBackDetail && <ProCard style={{ marginTop: 8 }} gutter={8} >
                <ProForm
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    layout={"horizontal"}
                    formRef={formRef}
                    initialValues={feedBackDetail}
                    onFinish={async (values) => {
                        const { replyContent, ...others } = values;
                        let params = {
                            id: cur_id,
                            replyContent
                        };
                        const msg = await feedBackReply(params);
                        if (msg.code === 0) {
                            message.success('操作成功', 1, () => {
                                // 设置当前tab对象
                                $utils.setNewTab(dispatch, { name: '意见反馈', path: '/OperationsMange/Feedback', isTopMenu: true });
                                history.push('/OperationsMange/Feedback');
                            });
                        }
                    }}
                    submitter={{
                        render: (props, doms) => {
                            return [
                                <Space style={{ marginLeft: '16.66666667%' }}>
                                    {isReply && <Button type="primary" htmlType="submit">保存</Button>}
                                    <Button onClick={() => {
                                        // 设置当前tab对象
                                        $utils.setNewTab(dispatch, { name: '意见反馈', path: '/OperationsMange/Feedback', isTopMenu: true });
                                        history.push('/OperationsMange/Feedback');
                                    }}>取消</Button>
                                </Space>
                            ]
                        }
                    }}
                >
                    <Title level={3} >反馈信息</Title>
                    <Row>
                        <Col span={10}>
                            <ProFormText
                                disabled={true}
                                name="userName"
                                label={'姓名'}
                            />
                        </Col>
                        <Col span={10}>
                            <ProFormText
                                disabled={true}
                                name="phone"
                                label={'手机号'}
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={10}>
                            <ProFormText
                                disabled={true}
                                name="stationName"
                                label={'名称'}
                            />
                        </Col>
                        <Col span={10}>
                            <ProFormText
                                disabled={true}
                                name="createTime"
                                label={'添加时间'}
                            />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={10}>
                            <ProFormTextArea
                                disabled={true}
                                name="content"
                                label={'反馈内容'}
                            />
                        </Col>
                        <Col span={10}>
                            <Form.Item label="反馈图片">
                                <Image.PreviewGroup>
                                    <Space wrap>
                                        {feedBackDetail.imgList.length > 0 ? feedBackDetail.imgList.map((src: string) => {
                                            return <Image width={65} height={65} src={src} />
                                        }) : '无图片'}
                                    </Space>

                                </Image.PreviewGroup>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Title level={3} >回复信息</Title>
                    <Row>
                        <Col span={10}>
                            {isDetail && <ProFormText
                                disabled={true}
                                name="replyUserName"
                                label={'姓名'}
                            />}
                        </Col>
                        <Col span={10}>
                            {isDetail && <ProFormText
                                disabled={true}
                                name="replyTime"
                                label={'回复时间'}
                            />}
                        </Col>
                    </Row>
                    <Row>
                        <Col span={10}>
                            <ProFormTextArea
                                disabled={isDetail}
                                placeholder={'请输入内容'}
                                name="replyContent"
                                label={'回复内容'}
                                fieldProps={{
                                    maxLength: 200
                                }}
                                rules={[
                                    {
                                        required: true,
                                    }
                                ]}
                            />
                        </Col>
                    </Row>
                </ProForm>
            </ProCard>}
        </PageContainer>
    );
};

export default Detail;
